<template>
  <a-card class="result-success" :bordered="false">
    <div class="top_box dsp_flex">
      <div class="avatar_div">
        <a-avatar :size="64" style="background: #3370FFFF;">{{info.name}}</a-avatar>
      </div>

      <div class="infos">
        <div class="dsp_flex">
          <h2 style="margin: 0 30px 0 0">{{info.name}}</h2>
          <a-tag color="orange" v-if="info.status=='UnEntry'">待入职</a-tag>
          <a-tag color="blue" v-else-if="info.status=='OnJob'">在职</a-tag>
          <a-tag color="red" v-else-if="info.status=='UnDimission'">待离职</a-tag>
          <a-tag color="red" v-else-if="info.status=='Dimission'">已离职</a-tag>
          <a-tag color="red" v-else-if="info.status=='Expired'">已失效</a-tag>
          <!-- <a-tag color="#FA541C">待签</a-tag>
          <a-tag color="#F5222D">拒签</a-tag>
          <a-tag color="#B7EB8F">已签</a-tag>
          <a-tag color="#722ED1">关闭</a-tag> -->
        </div>

        <p class="c_a2 dsp_flex desc_p">
          <span>{{info.projectName}}</span>
          <a-divider type="vertical" />
          <span>{{info.deptName}}</span>
          <a-divider type="vertical" />
          <span>{{info.postName}}</span>
        </p>

        <div class="basicInfo_div">
          <a-row>
            <a-col :span="8">
              <p>手机: <span>{{info.mobile}}</span></p>
            </a-col>
            <a-col :span="8" v-if="info.wechat">
              <p>微信: <span>{{info.wechat ? info.wechat.wechatName : ''}}</span></p>
            </a-col>
            <a-col :span="8" v-if="info.email">
              <p>邮箱:
                <a-tooltip>
                  <template slot="title">
                    <span>{{info.email}}</span>
                  </template>
                  <span>{{info.email | widthFilter}}</span>
                </a-tooltip>
                <!-- <span>{{info.email}}</span> -->
              </p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="tabs_div">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="个人信息"></a-tab-pane>
        <a-tab-pane key="2" tab="合同信息" force-render></a-tab-pane>
        <a-tab-pane key="3" tab="附件"></a-tab-pane>
        <a-tab-pane key="4" tab="教育经历"></a-tab-pane>
        <a-tab-pane key="5" tab="工作经历"></a-tab-pane>
        <a-tab-pane key="6" tab="家庭成员"></a-tab-pane>
      </a-tabs>
    </div>

    <Tabs1 :personalInfos="personalInfos" v-if="currenTabsIdx === 1" @updatesPersonalInfo="updatesPersonalInfoFn" />
    <Tabs2 :contractInfos="{contract: info.contract, contractSimplify: contractSimplifyObj, userInfo: info.status}" :projectInfoObj="info" :colleagueListData="colleagueListData" v-if="currenTabsIdx === 2" @updatesContractData="updatesContractDataFn" />
    <!-- <Tabs2 :contractInfos="info.contract" :projectInfoObj="info" :colleagueListData="colleagueListData" v-if="currenTabsIdx === 2" @updatesContractData="updatesContractDataFn" /> -->
    <!-- <Tabs3 :fileList="fileList" v-if="currenTabsIdx === 3" /> -->
    <Tabs3 v-if="currenTabsIdx === 3" />
    <Tabs4 :eduHistoryList="eduHistoryList" v-if="currenTabsIdx === 4" @updatesEduData="updatesEduDataFn" />
    <Tabs5 :jobHistoryList="jobHistoryList" @updatesData="updatesDataFn" v-if="currenTabsIdx === 5" />
    <Tabs6 :familyMemberList="familyMemberList" v-if="currenTabsIdx === 6" />
  </a-card>
</template>

<script>
import { transferDate, getBirthdayFromIdCard } from '@/utils/util'
import { employeeDetailgetByIdApi } from '@/services/employeeManage'
import {
  personalInfo,
  eduHistory,
  familyMember,
  jobHistory,
} from '@/services/employeeDetail'
// attachmentList
import { del } from '@/utils/util'
import Tabs1 from "./tabs/tabs1";
import Tabs2 from "./tabs/tabs2";
import Tabs3 from "./tabs/tabs3";
import Tabs4 from "./tabs/tabs4";
import Tabs5 from "./tabs/tabs5";
import Tabs6 from "./tabs/tabs6";

export default {
  name: "employeeDetails",
  components: { Tabs1, Tabs2, Tabs3, Tabs4, Tabs5, Tabs6 },
  props: ['id'],
  data () {
    return {
      editClkFlag: false,
      layoutType: "horizontal",
      currenTabsIdx: 1,
      info: {},
      contractSimplifyObj: {},
      personalInfos: {},
      contactPerson: {},
      fileList: [],
      jobHistoryList: [],
      eduHistoryList: [],
      familyMemberList: []
    };
  },
  created () {
    let _id = this.id
    if (_id) {
      this.getDetail(_id)
    }
  },
  filters: {
    widthFilter (str) {
      return str.length > 19 ? str.substring(0, 19) + '...' : str
    }
  },
  methods: {
    getDetail (id) {
      let params = {
        id
      }
      employeeDetailgetByIdApi(params).then(res => {
        let { code, data, msg } = res.data
        if (code == 200) {
          this.info = data;
          // 数据拷贝
          let _obj = {}
          for (var i in data.contract) {
            _obj[i] = data.contract[i]
          }
          _obj = del(_obj, ['id', 'contractId', 'accountId', 'contractUrl', 'contractPaperUrl', 'planBecomeDate', 'realBecomeDate', 'jobPlace'])
          // this.contractSimplifyObj = _obj
          let {
            contractBeginDate,
            contractEndDate,
            contractType,
            deptName,
            electronicIf,
            jobDuty,
            jobNature,
            postName,
            salaryAmt,
            signEndTime,
            signStartTime,
            status,
            trialPeriodMonth,
            trialSalaryAmt,
          } = _obj

          this.contractSimplifyObj = {
            contractType,
            electronicIf,
            contractTemplateId: data.contractTemplateId,
            status,
            contractBeginDate,
            contractEndDate,
            deptName,
            postName,
            trialPeriodMonth,
            trialSalaryAmt,
            salaryAmt,
            jobDuty,
            jobNature,
            signEndTime,
            signStartTime,
          }

          this.$Storage.set('employDetail_userId', this.info.userId)
          this.$Storage.set('employDetail_employeeId', this.info.id)
          this.$Storage.set('employeeContract_id', data.contract.id)
          if (data.colleagueList.length != 0) {
            data.colleagueList.forEach((item, index) => {
              item['key'] = index + 1
              item['editable'] = false
            })
          }
          this.colleagueListData = data.colleagueList
          if (data.contract) {
            this.info.deptName = data.contract.deptName
            this.info.postName = data.contract.postName
          }

          if (data.project) {
            this.info.projectName = data.project.name
          }

          this.getPersonalInfo()
          this.getEduHistory()
          this.getJobHistory()
          this.getFamilyMember()
        } else if (code == 400) {
          this.$message.error(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    callback (key) {
      this.currenTabsIdx = Number(key);
    },
    editclkFn () {
      this.editClkFlag = true;
      this.layoutType = "vertical";
    },
    cancelBtnClkFn () {
      this.editClkFlag = false;
      this.layoutType = "horizontal";
    },
    /**
     * @description: 个人信息接口
     * @param {*}
     * @return {*}
     */
    getPersonalInfo () {
      personalInfo({ id: this.info.userId }).then(res => {
        let { code, data, msg } = res.data
        if (code == 200) {
          if (data) {
            let { name, mobile, email, gender, marriage, nation, education, political, census, address, schoolName, schoolMajor, firstJobDate, idCard, birthday } = data
            birthday = birthday ? transferDate(birthday, 0) : getBirthdayFromIdCard(idCard)
            let age = birthday ? new Date().getFullYear() - birthday.substring(0, birthday.indexOf('-')) : ''

            this.personalInfos = {
              name,
              mobile,
              idCard,
              email,
              gender,
              birthday,
              age,
              nation,
              marriage,
              political,
              census,
              address,
              education,
              schoolName,
              schoolMajor,
              firstJobDate,
              bankDeposit: data.bankCard?.bankDeposit,
              cardNum: data?.bankCard?.cardNum,
              bankAddress: data.bankCard?.bankAddress,
              contractName: this.contactPerson ? this.contactPerson.name : '',
              contractRelation: this.contactPerson.relation,
              contractMobile: this.contactPerson.mobile
            };

            this.info.wechat = data.wechat;
            this.info.email = data.email;
            // this.personalInfos.cardNum = data?.bankCard?.cardNum
            // this.personalInfos.bankAddress = data.bankCard?.bankAddress
            // this.personalInfos.bankDeposit = data.bankCard?.bankDeposit
            // this.personalInfos.contractName = this.contactPerson ? this.contactPerson.name : ''
            // this.personalInfos.contractMobile = this.contactPerson.mobile
            // this.personalInfos.contractRelation = this.contactPerson.relation
            // this.personalInfos.birthday = data?.birthday
            // this.personalInfos.age = this.personalInfos.birthday
            this.$Storage.set('userInfo_data', this.personalInfos)
          }
        } else {
          this.$message.error(msg)
          this.personalInfos = {}
        }
      })
    },
    /**
     * @description: 教育经历接口
     * @param {*}
     * @return {*}
     */
    getEduHistory () {
      eduHistory({ userId: this.info.userId }).then(res => {
        let { code, data, msg } = res.data
        if (code == 200) {
          data ? this.eduHistoryList = data : this.eduHistoryList = [];
        } else {
          this.$message.error(msg)
        }
      })
    },
    /**
     * @description: 工作经历接口
     * @param {*}
     * @return {*}
     */
    getJobHistory () {
      jobHistory({ userId: this.info.userId }).then(res => {
        let { code, data, msg } = res.data
        if (code == 200) {
          data ? this.jobHistoryList = data : this.jobHistoryList = []
        } else {
          this.$message.error(msg)
        }
      })
    },

    /**
     * @description: 家庭成员接口
     * @param {*}
     * @return {*}
     */
    getFamilyMember () {
      familyMember({ userId: this.info.userId }).then(res => {
        let { code, data, msg } = res.data
        if (code == 200) {
          if (data) {
            this.familyMemberList = data
            const ContactPerson = data.filter(val => val.contactType == "Contact")
            this.contactPerson = ContactPerson[0];
          }
        } else {
          this.$meaage.error(msg)
        }
      })
    },

    updatesDataFn () {
      this.getJobHistory()
    },

    updatesEduDataFn () {
      this.getEduHistory()
    },

    updatesPersonalInfoFn () {
      this.getDetail(this.id)
    },

    updatesContractDataFn (str) {
      if (str) {
        this.colleagueListData = []
      } else {
        this.getDetail(this.id)
      }
    }
  },
};
</script>

<style scoped lang="less">
.infos {
  width: 100%;
  margin-left: 20px;
  & > div {
    &:first-of-type {
      align-items: center;
      justify-content: flex-start;
    }
  }
}

.basicInfo_div {
  color: #a2a2a2;
  font-size: 16px;
  & > p {
    margin-bottom: 0;
  }
}

.basicInfo_div .tabs_div {
  margin-top: 20px;
}

.editable-add-btn {
  margin: 10px 0;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
  margin-top: 8px;
}

.c_a2 {
  color: #a2a2a2;
}

.desc_p {
  align-items: center;
}

.float_right {
  float: right;
}
</style>
